<template>
  <div class="home-page font-sans">
    <Navigation :listData="getNav" />
    <slot />
    <Footer />
  </div>
</template>

<script setup lang="ts">
import type { UserInfo, ApiResponse } from '../types/common'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const accessToken = useCookie('accessToken')
const refreshToken = useCookie('refreshToken')
const route = useRoute()

const { data: navigationData } = await useFetch<{
  links: { text: string; path: string }[]
}>('/api/navigation')

const getNav = computed(() => {
  return navigationData.value?.links || []
})
const userStore = useUserStore()
// 将API调用放在onMounted中，确保在客户端环境执行
// onMounted(async () => {
//   try {
//     const data = await useApi<ApiResponse<UserInfo>>('/api/user-info')
//     // 如果需要，更新用户存储
//     if (data.data) {
//       userStore.setUser(data.data)
//     }
//   } catch (error) {
//     console.error('获取用户信息失败', error)
//   }
// })
const { data, error } = await useFetch<ApiResponse<UserInfo>>('/api/user-info')
if (error.value) {
  userStore.setUser({
    id: 0,
    nickname: '',
    avatar: ''
  })
} else {
  if (data.value?.data) {
    userStore.setUser(data.value.data)
  }
}
</script>

<style scoped>
/* Layout 样式 */
</style>
